<!--
 * @Description: 
 * @Date: 2024-06-25 21:24:10
 * @LastEditTime: 2024-08-28 09:30:44
-->
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '三务公开',
  },
}
</route>
<template>
  <view class="w-screen overflow-hidden bg-#EFF1F3 min-h-100vh">
    <wd-tabs v-model="tab" @change="handleChange">
      <block v-for="item in menuList" :key="item">
        <wd-tab :title="`${item}`"></wd-tab>
      </block>
    </wd-tabs>
    <view class="bg-#EFF1F3 p-20rpx">
      <view
        class="flex flex-col bg-#fff px-40rpx py-20rpx"
        v-for="item in threeAffairsList"
        :key="item.id"
        @click="handleSubmit(item.id)"
      >
        <view class="text-32rpx tracking-0.1em">
          {{ item.title }}
        </view>
        <view class="flex items-center justify-between my-20rpx">
          <view class="flex items-center">
            <view
              class="px-20rpx py-6rpx border-rd-30rpx text-26rpx bg-#F9E1C9 color-#D35B35 mr-20rpx"
            >
              {{ item.source }}
            </view>
            <text class="text-26rpx">{{ formatTime(item.createTime, 'yyyy-MM-dd HH:mm:ss') }}</text>
          </view>
          <view class="flex gap-10rpx items-center">
            <wd-icon name="browse" size="22px"></wd-icon>
            <view class="text-26rpx">{{ item.readCount }}</view>
          </view>
        </view>
        <wd-divider></wd-divider>
      </view>
      <wd-status-tip v-if="threeAffairsList.length == 0" image="content" tip="暂无内容" />
    </view>
    <wd-loadmore v-if="threeAffairsList.length > 0" :state="state" @reload="loadmore" />
  </view>
</template>

<script lang="ts" setup>
import { getSanWuPage } from '@/service/threeAffairs/index'
import { formatTime } from '@/utils/index'

const tab = ref<number>(0)
const state = ref<string>('loading')
const menuList = ['村务公开 ', '党务公开', '财务公开']
const pages = reactive({
  pageNo: 1,
  pageSize: 10,
  type: 1,
})
const max = ref<number>(60)
const threeAffairsList = ref([])

// 测试 uni API 自动引入
onLoad(() => {
  getthreeAffairs()
  uni.$on('refreshPage', refreshPage)
})
onUnload(() => {
  uni.$off('refreshPage', refreshPage)
})
function refreshPage() {
  threeAffairsList.value = []
  getthreeAffairs()
}
function loadmore() {
  state.value = 'loading'
  setTimeout(() => {
    getthreeAffairs()
  }, 1000)
}
/**
 * @description: 详情跳转
 * @return {*}
 */
function handleSubmit(id) {
  uni.navigateTo({ url: `/pages/threeAffairs/detailIC?id=${id}` })
}

/**
 * @description:触底回调函数
 * @return {*}
 */
onReachBottom(() => {
  if (threeAffairsList.value.length === max.value) {
    state.value = 'finished'
  } else if (threeAffairsList.value.length < max.value) {
    pages.pageNo += 1
    loadmore()
  }
})
/**
 * @description: 获取三务公开列表
 * @return {*}
 */
async function getthreeAffairs() {
  const data: any = await getSanWuPage({ ...pages })
  threeAffairsList.value.push(...data.data.list)
  max.value = data.data.total
  threeAffairsList.value.length === max.value
    ? (state.value = 'finished')
    : (state.value = 'loading')
}
function handleChange(value) {
  threeAffairsList.value = []
  pages.type = value.index + 1
  getthreeAffairs()
}
</script>

<style lang="scss" scoped>
.main-title-color {
  color: #d14328;
}
:deep(.wd-tabs__line) {
  background: #046447 !important;
}
:deep(.wd-tabs__nav-item.is-active) {
  color: #046447;
}
</style>
